<template>
	<view class="window-top">
		<view class="window-flex">
			<view class="window-box">
				<scroll-view class="window-scroll" :scroll-y="false">
					<view class="tn-gradient-bg__cool-6 top-font-title" style="width: 100%; height: 100%;">
						<view style="width: 100%; display: flex;flex-direction: column;align-items: center;">
							<!-- 顶部占位 -->
							<view :style="'height:'+sConf.tH+'px;'"> </view>
							<!-- 标题 -->
							<view style="padding: 40px 100px;font-size: large;font-weight: bold;color: #fff;"> 我的成长
							</view>
						</view>

						<view class="growthSlBlock"
							style="height: 100%; display: flex;flex-direction: column;padding: 5px;">
							<template v-if="curStaff">
							<view v-for="(level, index) in levelData" :key="level.level"
								:class="{'curLevel':level.level === curStaff.expers.level}"
								style="display: flex;align-items: center;">
								<view
									style="display: flex;flex-direction: column;align-items: center;gap: 10px;padding: 10px;min-width: 30%;">
									<tn-icon :name="level.icon" :color="level.color" size="60"></tn-icon>
									<view :style="{color:level.color}">{{level.name}}</view>
								</view>
								<view style="color: #fff;">
									<view> <text style="font-weight: bold;"> 当前经验：</text>
										{{level.level === curStaff.expers.level?curStaff.expers.amount:'--'}}
									</view>
									<view> <text style="font-weight: bold;"> 升级经验：</text>
										{{level.level === curStaff.expers.level?loadFilterData(curStaff.expers.level + 1).money:'--'}}
									</view>
									<view> <text style="font-weight: bold;"> 当前折扣：</text>
										{{level.level === curStaff.expers.level?loadFilterData(curStaff.expers.level).discount+'%':'--'}}
									</view>
								</view>
							</view>
							</template>
						</view>

						<!-- 顶部自定义导航 -->
						<tn-navbar :placeholder="true" fixed bg-color="#FFFFFF00" text-color="#fff"> {{title}}
						</tn-navbar>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from '@/common/utils';
	export default {
		data() {
			return {
				topH: 0,
				title: '悦君玺 • 重庆',
				sConf: getApp().globalData,
				levelData: [],
				curStaff: null
			}
		},
		onLoad() {
			this.loadUserinfoData(this.sConf.auth.id)
			this.loadLevelList()
		},
		onReady() {
			// this.designLayout()
		},
		methods: {
			designLayout() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.growthSlBlock').boundingClientRect();
					query.exec((res) => {
						this.topH = this.sConf.iH - res[0].top - this.sConf.tH + 10;
					});
				})
			},
			loadDefData() {
				// this.loadLevelList()
				// this.loadUserinfoData(this.sConf.auth.id)
			},
			/**
			 * 加载等级列表
			 */
			loadLevelList() {
				let host = this.sConf.host + '/weapps/staffLevel/'
				let token = this.sConf.token || '';
				let data = {
					status: 1,
					ordering: 'id'
				}
				utils.authenticatorList(host, token, data).then((res) => {
					console.log('加载等级列表', res);
					if (res.rescode === 200) {
						this.levelData = res.resmsg
					}
				});
			},
			/**
			 * 加载个人信息
			 */
			loadUserinfoData(e) {
				let host = this.sConf.host + '/weapps/userinfo/' + e + '/';
				let token = this.sConf.token || '';
				utils.authenticatorRead(host, token).then((res) => {
					console.log('加载个人信息', res);
					if (res.rescode === 200) {
						this.curStaff = res.resmsg
					}
				})
			},
			/**
			 * 过滤数据			 
			 */
			loadFilterData(e) {
				return this.levelData.find(item => item.level === e)
			},


		}
	}
</script>

<style lang="scss" scoped>
	.curLevel {
		border: $uni-color-banner 1px solid;
		border-radius: 10px;
	}
</style>